<template>
  <div class="share">
    <div class="block">
      <el-card class="box-card" :body-style="{backgroundColor: '#fafafa'}">
        <div slot="header" class="box-head">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item class="c-text" :to="{ path: '/article' }">
              首页
            </el-breadcrumb-item>
            <el-breadcrumb-item class="c-text">
              搜索：“{{this.str}}”
            </el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div class="box-body">
          <el-table class="c-tab" :data="this.case" :show-header="false" @row-click="handle" :row-style="{height: '45px'}" :cell-style="{padding: '0'}">
            <el-table-column prop="title" width="1000" show-overflow-tooltip></el-table-column>
            <el-table-column prop="time" width="128" :formatter="dateForma"></el-table-column>
          </el-table>
        </div>
        <div>
          <el-pagination class="pag" layout="sizes, prev, pager, next, jumper" :total="this.total" @current-change="page"
                         :page-sizes="[10, 20, 50, 100]" :page-size="10" @size-change="load">
          </el-pagination>
        </div>
      </el-card>
    </div>
  </div>

</template>

<script>
import axios from "axios";
import moment from "moment";

export default {
  data : function() {
    return {
      case: [],
      pages: '',
      total: '',
      size: '',
      type: '',
      str: '',
    }
  },
  mounted() {
    this.load(10);
  },
  methods: {
    load(size) {
      this.size = size
      // 设置每页大小
      if(!sessionStorage.getItem("type") || !sessionStorage.getItem("str")) {
        // 判断本地存储是否存在
        this.$message({
          showClose: true,
          type: "error",
          message: "搜索信息读取失败！"
        })
        // 返回失败信息
        this.$router.push("/article")
        // 跳转文章页面
      }
      this.type = JSON.parse(sessionStorage.getItem("type"))
      this.str = JSON.parse(sessionStorage.getItem("str"))
      // 读取本地存储
      axios.get("api/article/info/page", {
        params: {
          type: this.type,
          size: size,
          str: this.str,
        }
      }).then((res) => {
        if (res.data.code === '0') {
          // 成功从后端获取返回信息
          this.case = res.data.data.records
          this.pages = res.data.data.pages
          this.total = res.data.data.total
          // 读取后端返回数据
        } else {
          this.$message({
            showClose: true,
            type: "error",
            message: "文章信息获取失败！"
          })
          // 返回失败信息
        }
      })
    },
    dateForma: function(row,column){
      var date = row[column.property];
      if(date === undefined){return ''};
      return moment(date).format("YYYY-MM-DD")
    },
    handle(row) {
      console.log(row)
      if(row.type === 1) {
        sessionStorage.setItem("knowledge", JSON.stringify(row))
        this.$router.push("/article/knowledge/kdetails")
      } else if(row.type === 2) {
        sessionStorage.setItem("case", JSON.stringify(row))
        this.$router.push("/article/case/cdetails")
      } else if(row.type === 3) {
        sessionStorage.setItem("share", JSON.stringify(row))
        this.$router.push("/article/share/sdetails")
      }
    },
    page(currentPage) {
      axios.get("api/article/info/page", {
        params: {
          type: this.type,
          size: this.size,
          num: currentPage,
          str: this.str
        }
      }).then((res) => {
        if (res.data.code === '0') {
          this.case = res.data.data.records
        } else {
          this.$message({
            showClose: true,
            type: "error",
            message: "文章信息获取失败！"
          })
        }
      })
    }
  }
}
</script>

<style scoped>
.share{
  width: 100%;
  min-height: 666px;
}

.block{
  width: 80%;
  position: relative;
  padding-top: 20px;
  left: 50%;
  transform: translate(-50%, 0%);
  /*box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);*/
}

.box-card{
  background-color: #354e66;
}

/deep/ .el-breadcrumb__inner {
  color: #f9bf4b !important;
  font-weight: bold !important;
}

.c-text {
  font-size: 17px;
  color: #f9bf4b;
}

.box-body {
  padding: 0 20px;
}

.c-tab {
  background-color: transparent;

}

/deep/ .el-table th, /deep/ .el-table tr, /deep/ .el-table td {
  background-color: transparent;
}


.pag {
  padding-top: 30px;
}

/deep/ .number, /deep/ .btn-prev, /deep/ .btn-next{
  background-color: transparent !important;
  font-size: 15px;
}

</style>